<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>main</title>
	<link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
	<!-- Date: 2011-01-12 -->
</head>
<body>	{{ greeting }}
	<script language="Javascript" type="text/javascript"
src="scripts/CodeMirror-0.92/js/codemirror.js"></script>
	<script type="text/javascript" src="/_ah/channel/jsapi"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript"></script>
	<script type="text/javascript" src="scripts/jstree/jquery.jstree.js"></script>
	<link rel="stylesheet" type="text/css" href="scripts/CodeMirror-0.92/css/docs.css"/>
	<body style="padding: 20px;">

<body>
	<script type="text/javascript">
		onmessage = function(msg) {
			//alert(msg.data);
			message = JSON.parse(msg.data);
			if(message.id === "load") {
				editor.setCode(message.code);
			}
		};
		onclose = function() {
			//alert("Channel Closed :(");
		};
		onopen = function() {
			//alert("Channel Opened");
		};
		onerror = function() {
			//alert("Channel Error")
		};
		channel = new goog.appengine.Channel('{{ channel_id }}');
		var handler = {
			'onopen': onopen,
			'onclose': onclose,
			'onmessage': onmessage,
			'onerror': onerror
		};
		socket = channel.open();
		socket.onopen = onopen;
		socket.onmessage = onmessage;
		saveMessage = function(code, fileName) {
			var object = {
				"code": code,
				"fileName": fileName
			};
			if(object.code != null && fileName != null) {
				jsonObject = JSON.stringify(object);
				var xhr = new XMLHttpRequest();
				xhr.open('POST', "/save", true);
				xhr.send(jsonObject);
				$('#jstree1').jstree('refresh',-1);
			}
		};
		send
		 = function(code, fileName) {
			code = encodeURI(code);
			var msg = "&" + "code=" + code + "&" + "saveName=" + fileName;
			if(msg) {
				var xhr = new XMLHttpRequest();
				xhr.open('POST', "/save?channel_id={{ channel_id }}" + msg, true);
				xhr.send();
			}
		};
		downloadMessage = function(fileName) {
			if(fileName != null) {
				message = encodeURI(fileName);
				var xhr = new XMLHttpRequest();
				xhr.open('GET', "/download?fileName=" + message, true);
				xhr.send();
			}
		};
		loadMessage = function(fileName) {
			var object = {
				"fileName": fileName,
				"channel_id": "{{ channel_id }}",
			};
			if(object.fileName != null && object.channel_id != null) {
				jsonObject = JSON.stringify(object);
				message = encodeURIComponent(jsonObject);
				var xhr = new XMLHttpRequest();
				xhr.open('POST', "/load?message=" + message, true);
				xhr.onreadystatechange = function() {
					if(xhr.readyState == 4 && xhr.status == 200) {
						try {
							response = JSON.parse(xhr.responseText);
						} catch(e) {
							response = xhr.responseText;
						}
						editor.setCode(response.code);
						//onmessage(response);
					}
				}
				xhr.send();
			}
		};
	</script>
	<form id="webeditor" name="webeditor" action="/save" method="post">
		<div style="border: 1px solid black; padding: 3px;">
		<textarea id="code" name="code" cols="100" rows="20" style="width:100%"></textarea></div>
			<fieldset>
			Save (name)	<input type="text" size="48" id="saveName" name="saveName" required placeholder="Enter a valid filename" onblur="saveMessage(editor.getCode(), $('#saveName').val());">
			</fieldset>
	</form>
	
	<form id="loader" name="loader" action="/load" method="get">
		<div style="border: 1px solid black; padding: 3px;">

			<fieldset>
			Load (name)	<input type="text" size="48" id="fileName" name="fileName" required placeholder="Enter a valid filename" onblur="loadMessage($('#fileName').val());">
			</fieldset>
	</form>
	
	<form id="download_form" method="get" action="/">
		<!-- <input type="hidden" id="download" name="fileName"/> -->
	</form>
	
	<script type="text/javascript"> 
  		var editor = CodeMirror.fromTextArea("code", {
    		height: "350px",
    		parserfile: ["../contrib/python/js/parsepython.js"],
    		stylesheet: ["scripts/CodeMirror-0.92/contrib/python/css/pythoncolors.css"],
    		path: "scripts/CodeMirror-0.92/js/",
			lineNumbers: true,
			textWrapping: false,
			indent: 4,
			parserConfig: {'pythonVersion': 2, 'strictErrors': true}
  			});
	</script>
	<script type="text/javascript">
	$(function(){
		$("#jstree1")
			.jstree({
				"json_data": {
					"ajax": {
						"url": "/loadvalues",
						"data": function(n) {
							{id : n.attr ? n.attr("id"): 0};
						}
					},
					"ui" : {
						"select_limit" : 1
					}
				},
				"contextmenu": {
					"show_at_node" : true,
					"items": {
						"load" : {
							"label" : "Load",
							"action" : function(node) {
								loadMessage(node.attr("innerText").replace(/^\s*/, "").replace(/\s*$/, ""));
							},
							"_disabled" : false,
							"_class" : "class",
							"separator_before" : false,
							"separator_after" : false,
							"icon" : false,
							"submenu" : false
						},
						"download" : {
							"label": "Download",
							"action": function(node) {
								fileName = node.attr("innerText").replace(/^\s*/, "").replace(/\s*$/, "");	//document.forms['download_form'].elements["download"].value = fileName;
//document.forms['download_form'].action = fileName;
//								document.forms['download_form'].submit();
								window.location.href = encodeURI("/download?filename=" +fileName);
							},
							"_disable": false,
							"_class": "class",
							"separator_before": false,
							"separator_after": false,
							"icon": false,
							"submenu": false
						}
					}
				},
				"plugins" : ["themes", "json_data", "ui", "crrm", "contextmenu"]
			});
	});
	</script>
	<div id="jstree1" class="panel"></div>
	

	
	
</body>
</html>
